<template>
	<view class="nav-bar-white">
		<view :style="{height:statusBarHeight+'px'}"></view>
		<uni-nav-bar left-icon="left" background-color="#FFF" color="#000" @clickLeft="back" title="商品管理" :border="false" fixed="true"></uni-nav-bar>
	</view>
	<view class="page" :style="{marginTop:statusBarHeight+45+'px'}">
		<view class="flex-row justify-around" style="padding-top: 10rpx;background-color: #fff;padding-bottom: 10rpx;">
			<view class="search-box">
				<image class="img" src="/static/search.png" />
				<view class="input">请输入商品名称</view>
			</view>
			<view class="flex-row screen-text" @click="openPop">
				<image src="/static/goods/goods_1.png" style="width: 30rpx;height: 30rpx;"></image>
				<text style="color: #999999;margin-left: 10rpx;">筛选</text>
			</view>
		</view>
		
		<view class="flex-row justify-around fixed-header" :style="{top:statusBarHeight+44+'px'}" style="position: sticky;border-bottom: 1px solid #E6E6E8;">
			<view v-for="(item, index) in topList" :key="index"
				:class="[item.default ? 'screen-item-avtive' : 'screen-item']" @click="changeTabs(item)">{{ item.name
				}}</view>
		</view>
		
		<view class="flex-col">
			<view class="flex-row justify-between" style="margin: 20rpx;font-size: 25rpx;">
				<text style="color: #333333;">{{currentName+':共100件商品'}}</text>
				<view class="flex-row items-center">
					<view v-if="status != 0 && !isBatchMode" class="flex-row items-center" @click="enterBatchMode">
						<image src="/static/goods/goods_2.png" style="width: 30rpx;height: 30rpx;"></image>
						<text style="color: #666666;margin-left: 10rpx;">批量操作</text>
					</view>
					<view v-if="isBatchMode" class="flex-row items-center" @click="exitBatchMode">
						<image src="/static/goods/goods_2.png" style="width: 30rpx;height: 30rpx;"></image>
						<text style="color: #666666;margin-left: 10rpx;">完成</text>
					</view>
				</view>
				
			</view>
			
			<view style="margin-bottom: 180rpx;">
				<view class="flex-col goods-items" style="margin-bottom: 15rpx;" v-for="(item,index) in list" :key="index">
					<view class="item-tips">出售中</view>
					<view class="flex-row" style="padding: 20rpx;">	
						
						<view v-if="isBatchMode" class="item-checkbox">
						  <radio 
							:checked="selectedItems.includes(item.id)" 
							@click="toggleSelect(item.id)" 
						  />
						</view>
						
						<view class="items-image">
							<image src="/static/default_avator.png" style="width: 130rpx;height: 130rpx;"></image>
						</view>
						
						<view class="items-right-text">
							<text style="color: #333333;">商品名称商品名称商品名称商品名称商品名称商品名称</text>
							<view class="flex-row justify-between" style="margin-top: 10rpx;">
								<text style="color: #999999;">已售：123</text>
								<text style="color: #999999;">库存：123</text>
							</view>
							<text style="color: #FF0000;font-size: 30rpx;margin-top: 10rpx;">￥123.45</text>
						</view>
					</view>
					
					<view class="flex-row justify-between items-center" style="margin-top: 20rpx;padding: 20rpx;">
						<text style="color: #3274F9;">更多</text>
						<view class="flex-row justify-end" style="gap: 20rpx;">
							<view class="small-grey-btn">改库存</view>
							<view class="small-grey-btn">复制</view>
							<view class="small-grey-btn">下架</view>
							<view class="small-grey-btn">编辑</view>
						</view>
					</view>
				</view>
			</view>
			
			
		</view>
		
		
		<view v-if="isBatchMode && list.length > 0" class="select-all">
			<view class="checkbox">
			  <radio 
				:checked="selectAll" 
				@click="toggleSelectAll" 
			  />
			  <text>全选</text>
			</view>
			<view class="flex-row items-center" style="gap: 10rpx;">
				<view v-if="status == 4" class="batch-btn">恢复选中</view>
				<view class="batch-btn">{{dynamicText()}}</view>
			</view>
			
			
		</view>
		
	</view>
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" background-color="#fff">
		<view class="flex-col pop-bg" style="padding: 25rpx;">
			<view class="flex-row justify-between">
				<text>商品筛选</text>
				<uni-icons type="closeempty" size="22" @click="closePop"></uni-icons>
			</view>
			<view class="line" style="margin-top: 30rpx;color: #fff;">.</view>
			<view style="margin-top: 30rpx;">
				<text>卖价</text>
				<view class="flex-row justify-around items-center" style="margin-top: 20rpx;">
					<input class="low-input" type="digit" placeholder="最低价" />
					<text style="color: #999999;margin-left: 20rpx;margin-right: 20rpx;">-</text>
					<input class="high-input" type="digit" placeholder="最高价" />
				</view>
			</view>
			<view style="margin-top: 30rpx;">
				<text>专区类型</text>
				<uni-data-checkbox class="custom-checkbox" v-model="value1" mode="tag" :localdata="range1" @change="change1"></uni-data-checkbox>
			</view>
			<view style="margin-top: 30rpx;">
				<text>商品类型</text>
				<uni-data-checkbox class="custom-checkbox" v-model="value2" mode="tag" :localdata="range2" @change="change2"></uni-data-checkbox>
			</view>
			<view style="margin-top: 30rpx;">
				<text>无理由退货</text>
				<uni-data-checkbox class="custom-checkbox" v-model="value3" mode="tag" :localdata="range3" @change="change3"></uni-data-checkbox>
			</view>
			<view style="margin-top: 30rpx;">
				<text>商品营销</text>
				<uni-data-checkbox class="custom-checkbox" v-model="value4" mode="tag" :localdata="range4" @change="change4"></uni-data-checkbox>
			</view>
			<view class="line" style="margin-top: 30rpx;color: #fff;">.</view>
			<view class="flex-row justify-around" style="margin-top: 50rpx;">
				<button class="btn-reset">重置</button>
				<button class="btn-sure">确定</button>
			</view>
		</view>
	</uni-popup>
	
	
</template>

<script>
	import { useUserStore } from '../../store/userStore';
	export default {
		data() {
			return {
				list:[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
				isBatchMode: false,
			    selectedItems: [],
				selectAll: false,
				topList: [{
					name: '全部',
					default: true,
					id: 0
				}, {
					name: '出售中',
					default: false,
					id: 1
				}, {
					name: '已售罄',
					default: false,
					id: 2
				},{
					name: '仓库中',
					default: false,
					id: 3
				},
				{
					name: '回收站',
					default: false,
					id: 4
				},],
				status:'0',
				currentName:'全部',
				value1:0,
				range1: [{"value": 0,"text": "全部"	},{"value": 1,"text": "绵州商城"},{"value": 2,"text": "生日专区"},
				{"value": 3,"text": "休闲文旅"},{"value": 4,"text": "商务办公"}],
				
				value2:0,
				range2: [{"value": 0,"text": "全部"	},{"value": 1,"text": "普通商品"},{"value": 2,"text": "卡密商品"},
				{"value": 3,"text": "虚拟商品"}],
				
				value3:0,
				range3: [{"value": 0,"text": "全部"	},{"value": 1,"text": "支持无理由"},{"value": 2,"text": "不支持无理由"}],
				
				value4:0,
				range4: [{"value": 0,"text": "全部"	},{"value": 1,"text": "热卖"},{"value": 2,"text": "好货"},
				{"value": 3,"text": "上新"}],
				
			};
		},
		computed:{
			statusBarHeight(){
				return useUserStore().statusBarHeight
			}
		},
		methods:{
			toggleSelect(){
				const index = this.selectedItems.indexOf(id)
				if (index > -1) {
					this.selectedItems.splice(index, 1)
				} else {
					this.selectedItems.push(id)
				}
			    this.updateSelectAllState()
			},
			///全选
			toggleSelectAll(){
				if (this.selectAll) {
					this.selectedItems = []
				} else {
					this.selectedItems = this.listData.map(item => item.id)
			    }
			    this.selectAll = !this.selectAll
			},
			// 更新全选状态
			updateSelectAllState() {
		        this.selectAll = this.selectedItems.length === this.list.length && this.list.length > 0
		    },
			///批量操作
			enterBatchMode(){
				this.isBatchMode = true
			    this.selectedItems = []
			    this.selectAll = false
			},
			///取消批量操作
			exitBatchMode(){
			    this.isBatchMode = false
				this.selectedItems = []
			    this.selectAll = false
			},
			dynamicText(){
				switch(this.status){
					case 1:
					return '下架选中'
					break
					case 2:
					return '上架选中'
					break
					case 3:
					return '上架选中'
					break
					case 4:
					return '删除选中'
					break
				}
			},
			
			change1(e){
				console.log(e)
			},
			change2(e){
				console.log(e)
			},
			change3(e){
				console.log(e)
			},
			change4(e){
				console.log(e)
			},
			changeTabs(item) {
				let obj = this.topList.find(v => v.default)
				if (obj) {
					obj.default = false
					item.default = true
				}
				this.status = item.id
				this.currentName = item.name
				this.isBatchMode = false
				// 	this.getRequestList()
			},
			openPop(){
				this.$refs.popup.open()
			},
			closePop(){
				this.$refs.popup.close()
			},
			back(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
.fixed-header{
	// position: sticky;
	// top: 0; /* 粘性定位的起始位置 */
	background-color: white; /* 背景色 */
	z-index: 10; /* 确保在内容之上 */
}	
.page {
	width: 100%;
	// overflow-y: auto;
	// overflow-x: hidden;
	height: 100%;
	min-height: 90vh;
	background-color: #F5F6F7;
}
.line1{
	width: 100%;
	height: 1px;
	background-color: #E7E7E7;
}
.search-box {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #F3F3F3;
	height: 70rpx;
	border-radius: 35rpx;
	margin-left: 30rpx;
	width: 70%;

	.img {
		width: 32rpx;
		height: 32rpx;
		margin-left: 24rpx;
		margin-right: 15rpx;
	}

	.input {
		flex: 1;
		text-align: left;
		color: #999999;
		font-size: 28rpx;
		padding-left: 20rpx;
	}
}
.screen-text{
	width: 30%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.screen-item-avtive {
	position: relative;
	font-size: 28rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: bold;
	color: #428AF6;
	letter-spacing: 2rpx;
	padding: 24rpx 0;
}
.screen-item {
	font-size: 28rpx;
	font-family: PingFang SC, PingFang SC;
	color: #333;
	letter-spacing: 2rpx;
	padding: 24rpx 0;
}
.screen-item-avtive::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	height: 4rpx;
	background-color: #428AF6;
	width: 50%;
	transform: translateX(-50%);
	border-radius: 4rpx;
	
	// transition: all .5s linear;
	animation: change 1s linear;
}
@keyframes change {
	0% {
		width: 50%;
	}

	50% {
		width: 100%;
	}

	100% {
		width: 50%;
	}
}
.goods-items{
	background-color: #FFF;
	// padding: 20rpx;
	min-height: 200rpx;
	margin: 10rpx 20rpx;
	border-radius: 10rpx;
	position: relative;
}
.item-tips{
	background-color: #19BE6B;
	border-top-left-radius: 10rpx;
	border-bottom-right-radius: 10rpx;
	color: #FFFFFF;
	padding: 2rpx 8rpx;
	position: absolute;
	font-size: 25rpx;
	top: 0;
	left: 0;
}
.item-checkbox{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 10%;
}
.items-image{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 20%;
}
.items-right-text{
	display: flex;
	flex-direction: column;
	width: 70%;
	padding: 10rpx;
}
.small-grey-btn{
	border: 1rpx solid #C1C1C1;
	color: #333333;
	border-radius: 35rpx;
	padding: 5rpx 20rpx;
}
.select-all{
	padding: 20rpx;
    background: white; 
    border-bottom: 1rpx solid #eee;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 150rpx; 
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.checkbox {
  display: flex;
  align-items: center;
  gap: 20rpx;
}
.batch-btn{
	border: 1rpx solid #3274F9;
	color: #3274F9;
	border-radius: 35rpx;
	padding: 8rpx 30rpx;
}



/**pop css**/
.pop-bg{
	max-height: 80vh;
	overflow-y: auto;
}
.low-input{
	width: 50%;
	background-color: #F4F5F7;
	border-radius: 35rpx;
	height: 80rpx;
	padding-left: 20rpx;
}
.high-input{
	width: 50%;
	background-color: #F4F5F7;
	border-radius: 35rpx;
	height: 80rpx;
	padding-left: 20rpx;
}
.btn-reset{
	border: 1px solid #3274F9;
	padding: 30rpx 70rpx;
	color: #3274F9;
	border-radius: 40rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.btn-sure{
	background-color: #3274F9;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 40rpx;
	padding: 30rpx 70rpx;
	height: 80rpx;
}
.custom-checkbox .uni-data-checklist .checklist-group .checklist-box.is--tag  {
  border-radius: 20px; /* 设置圆角大小 */
  overflow: hidden; /* 防止内容溢出 */
  padding: 20rpx 35rpx;
  margin-top: 30rpx;
}
.custom-checkbox .uni-data-checklist .checklist-group .checklist-box.is--tag{
  margin-right: 15px;	
}
</style>
